<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2025-08-19 16:33:13
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-09-01 11:37:26
 * @FilePath: /XMate-h5/src/views/myXmate/myTeam/teamBusinessOpport/index.vue
 * @Description: 
 * 
 * Copyright (c) 2025 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <div class="h-screen w-screen flex flex-col overflow-y-auto bg-white">
    <businessOpportListHead
      searchPlaceholder="请输入商机名称搜索"
      v-model:searchValue="searchText"
      :enableDrpt="true"
      :drptTitle="cp_drptTitle"
      @search="onSearch"
      @filter="onFilter"
      @drptFilter="onDrptFilter"
    />

    <div
      class="flex-auto overflow-y-auto px-2 bg-gradient-to-b from-white from-10% blue-100 via-11% to-blue-100 to-90%"
    >
      <businessOpportListView
        class="flex-auto"
        v-model:loading="loading"
        v-model:refreshing="refreshing"
        v-model:finished="finished"
        :list="list"
        :loadMoreData="loadMoreData"
        :onRefresh="onRefresh"
        :myTeam="true"
      />
    </div>
    <commonFilter
      :filterOptions="filterOptions"
      @onConfirm="onConfirmFilter"
      ref="opportFilterRef"
    />

    <chooseTeamView
      ref="chooseTeamViewRef"
      :selectItems="[]"
      @onConfirm="onConfirmTeam"
    />
  </div>
</template>

<script setup lang="ts">
import businessOpportListHead from "../../components/businessOpportListHead.vue";
import businessOpportListView from "@/components/businessOpportListView/index.vue";
import { getMyOpportunityListAPI } from "@/services/customer/index.js";
import { ref, onMounted, computed } from "vue";
import { useMyXmateStore } from "@/store";
import commonFilter from "@/components/commonFilter/commonFilter.vue";
import chooseTeamView from "@/views/myXmate/components/chooseTeamView.vue";

const store = useMyXmateStore();
const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);

const page = ref(1);
const pageSize = 10;
const searchText = ref("");
const flowId = ref("");
const dptIds = ref([]);

async function loadData() {
  loading.value = true;
  const res = await getMyOpportunityListAPI({
    pageNumber: page.value,
    pageSize,
    searchKey: searchText.value,
    flowId: flowId.value,
    dptIds: dptIds.value,
    myTeam: true,
  });
  loading.value = false;
  if (page.value === 1) {
    list.value = res.datas;
  } else {
    list.value = [...list.value, ...(res.datas || [])];
  }
  if ((res.datas || []).length < pageSize) {
    finished.value = true;
  }
}

async function loadMoreData() {
  page.value += 1;
  await loadData();
}

async function onRefresh() {
  refreshing.value = true;
  page.value = 1;
  await loadData();
  refreshing.value = false;
}

async function onSearch(value: string) {
  console.log("onSearch", value);
  onRefresh();
}

const opportFilterRef = ref();

const filterOptions = ref([]);
async function onFilter() {
  makeFilterOptions();
  opportFilterRef.value.show();
}

const chooseTeamViewRef = ref();
function onDrptFilter() {
  chooseTeamViewRef.value.show();
}

const cp_flowList = computed(() => {
  return store.communicationFlows.filter((item) => item.type === 1);
});
function makeFilterOptions() {
  if (filterOptions.value.length > 0) {
    return;
  }
  let flowList = cp_flowList.value.map((item) => {
    return {
      label: item.name,
      value: item.id,
    };
  });

  filterOptions.value = [
    {
      key: "flowId",
      title: "沟通流程",
      multiple: false,
      allowCancel: true,
      items: flowList,
    },
  ];
}

function onConfirmFilter(parameter: any) {
  flowId.value = parameter.flowId?.value || "";
  onRefresh();
}
const selectTeams = ref([]);
function onConfirmTeam(parameter: Array<any>) {
  selectTeams.value = parameter;
  dptIds.value = selectTeams.value.map((item: any) => item.id);
  onRefresh();
}

const cp_drptTitle = computed(() => {
  if (selectTeams.value.length == 0) {
    return "全部部门";
  }
  return selectTeams.value[0].name;
});

onMounted(() => {
  onRefresh();
});
</script>

<style scoped lang="less"></style>
